<template>
  <el-dialog
    v-model="visible"
    title="课程评价"
    :close-on-click-modal="false"
    width="80%"
  >
    <!-- 搜索表单 -->
    <el-form
      :inline="true"
      :model="searchForm"
      style="margin-bottom: 20px;"
    >
      <el-form-item>
        <el-select
          v-model="searchForm.status"
          placeholder="评价状态"
          clearable
        >
          <el-option
            label="全部"
            :value="null"
          />
          <el-option
            label="显示"
            :value="1"
          />
          <el-option
            label="屏蔽"
            :value="0"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="() => { page.currentPage = 1; getCommentList() }"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 评价列表 -->
    <el-table
      :data="commentList"
      border
      style="width: 100%; margin-bottom: 20px;"
      v-loading="commentListLoading"
      row-key="id"
    >
      <!-- 展开行显示回复 -->
      <el-table-column type="expand">
        <template #default="scope">
          <div v-if="scope.row.replies && scope.row.replies.length > 0" style="padding: 3px;">
            <!-- <div style="margin-bottom: 10px; font-weight: bold;">回复列表：</div> -->
            <el-table
              :data="scope.row.replies"
              border
              style="width: 100%;"
            >
              <el-table-column
                prop="realName || nickName"
                header-align="center"
                align="center"
                width="120"
                label="回复人"
              />
              <el-table-column
                prop="content"
                header-align="center"
                align="left"
                label="回复内容"
              >
                <template #default="replyScope">
                  <div style="max-height: 80px; overflow-y: auto;">
                    {{ replyScope.row.content }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="createdAt"
                header-align="center"
                align="center"
                width="180"
                label="回复时间"
              />
              <el-table-column
                header-align="center"
                align="center"
                width="150"
                label="操作"
              >
                <template #default="replyScope">
                  <el-button
                    type="danger"
                    size="small"
                    @click="onDeleteComment(replyScope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else style="padding: 20px; color: #999;">
            暂无回复
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="realName || nickName"
        header-align="center"
        align="center"
        width="120"
        label="评价人"
      />
      <el-table-column
        prop="rating"
        header-align="center"
        align="center"
        width="100"
        label="评分"
      >
        <template #default="scope">
          <el-rate
            v-model="scope.row.rating"
            disabled
            allow-half
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        header-align="center"
        align="left"
        label="评价内容"
      >
        <template #default="scope">
          <div style="max-height: 100px; overflow-y: auto;">
            {{ scope.row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        width="100"
        label="状态"
      >
        <template #default="scope">
          <el-tag
            v-if="scope.row.status === 1"
            type="success"
          >
            显示
          </el-tag>
          <el-tag
            v-else
            type="danger"
          >
            屏蔽
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdAt"
        header-align="center"
        align="center"
        width="180"
        label="评价时间"
      />
      <el-table-column
        header-align="center"
        align="center"
        width="200"
        label="操作"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.status === 1"
            type="warning"
            size="small"
            @click="onBlockComment(scope.row.id)"
          >
            屏蔽
          </el-button>
          <el-button
            v-else
            type="success"
            size="small"
            @click="onShowComment(scope.row.id)"
          >
            显示
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="onDeleteComment(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['close'])

const visible = ref(false)
const courseId = ref(null)

const searchForm = reactive({
  status: null
})

const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

const commentList = ref([])
const commentListLoading = ref(false)

/**
 * 初始化对话框
 */
const init = (id) => {
  visible.value = true
  courseId.value = id
  page.currentPage = 1
  searchForm.status = null
  getCommentList()
}

defineExpose({ init })

/**
 * 获取评价列表
 */
const getCommentList = () => {
  commentListLoading.value = true
  const params = {
    courseId: courseId.value,
    current: page.currentPage,
    size: page.pageSize
  }
  // 只有当 status 不为 null 时才添加到参数中
  if (searchForm.status !== null && searchForm.status !== undefined) {
    params.status = searchForm.status
  }
  http({
    url: http.adornUrl('/admin/courseComment/page'),
    method: 'get',
    params: http.adornParams(params)
  })
    .then(({ data }) => {
      commentList.value = data.records || []
      page.total = data.total || 0
      commentListLoading.value = false
    })
    .catch(() => {
      ElMessage.error('获取评价列表失败')
      commentListLoading.value = false
    })
}

/**
 * 每页数量变化
 */
const sizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getCommentList()
}

/**
 * 当前页变化
 */
const currentChangeHandle = (val) => {
  page.currentPage = val
  getCommentList()
}

/**
 * 屏蔽评价
 */
const onBlockComment = (id) => {
  ElMessageBox.confirm('确定屏蔽该评价?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http({
        url: http.adornUrl(`/admin/courseComment/block/${id}`),
        method: 'post'
      })
        .then(() => {
          ElMessage.success('屏蔽成功')
          getCommentList()
        })
        .catch(() => {
          ElMessage.error('屏蔽失败')
        })
    })
}

/**
 * 显示评价
 */
const onShowComment = (id) => {
  ElMessageBox.confirm('确定显示该评价?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http({
        url: http.adornUrl(`/admin/courseComment/show/${id}`),
        method: 'post'
      })
        .then(() => {
          ElMessage.success('显示成功')
          getCommentList()
        })
        .catch(() => {
          ElMessage.error('显示失败')
        })
    })
}

/**
 * 删除评价
 */
const onDeleteComment = (id) => {
  ElMessageBox.confirm('确定删除该评价?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http({
        url: http.adornUrl(`/admin/courseComment/delete/${id}`),
        method: 'post'
      })
        .then(() => {
          ElMessage.success('删除成功')
          getCommentList()
        })
        .catch(() => {
          ElMessage.error('删除失败')
        })
    })
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

